<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" xmlns:th="http://www.thymeleaf.org">
    <title>关键内容</title>
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/localpic/103.jpg}">

    <!-- CSS
    ========================= -->
    <!--bootstrap min css-->
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">
    <!--owl carousel min css-->
    <link rel="stylesheet" th:href="@{/assets/css/owl.carousel.min.css}">
    <!--slick min css-->
    <link rel="stylesheet" th:href="@{/assets/css/slick.css}">
    <!--magnific popup min css-->
    <link rel="stylesheet" th:href="@{/assets/css/magnific-popup.css}">
    <!--font awesome css-->
    <link rel="stylesheet" th:href="@{/assets/css/font.awesome.css}">
    <!--ionicons css-->
    <link rel="stylesheet" th:href="@{/assets/css/ionicons.min.css}">
    <!--7 stroke icons css-->
    <link rel="stylesheet" th:href="@{/assets/css/pe-icon-7-stroke.css}">
    <!--animate css-->
    <link rel="stylesheet" th:href="@{/assets/css/animate.css}">
    <!--jquery ui min css-->
    <link rel="stylesheet" th:href="@{/assets/css/jquery-ui.min.css}">
    <!--plugins css-->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">

    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">

    <!--modernizr min js here-->
    <script th:src="@{/assets/js/vendor/modernizr-3.7.1.min.js}"></script>

    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>
<script>
    function test(keyword,event){

        //定义全局变量
        var keyword = $("#keyword").val();
        var sel = document.getElementById("sel");
        var childs='';
        $.post(
            "/keySearch",//url
            "keyword="+ keyword,//发送的数据
            function(data){//获取响应回来的数据
                if (data == "") {
                    //把childs 这div集合放入到下拉提示框的父div中，上面我们以获取了
                    sel.innerHTML = "没有这个东西";
                    sel.style.display = "block";
                    return;
                }
                document.getElementById("sel").innerHTML="";

                var data=JSON.parse(data);

                for(var i=0;i<data.length;i++) {//循环每一个满足条件的记录
                    //将当前循环足条件的商品名称生成一个下拉的选项
                    childs += "<li onclick=Write(this) onmouseout=recoverColorwhenMouseout(this) onmouseover=changeColorwhenMouseover(this)>"
                        +data[i].productName+
                        "</li>";
                    console.log(data[i].productName);
                }

                sel.innerHTML=childs;
                //判断是否有满足条件的商品
                if(data.length>0){
                    sel.style.display='block';
                }else{
                    sel.style.display='none';
                }


                //当用户按下上下键时获取相应的值
                if(event.keyCode==40){
                    sel.focus();
                }
            },
            //发送数据类型
            "text"
        );
    }

    //鼠标悬停时改变div的颜色
    function changeColorwhenMouseover(div){
        div.style.backgroundColor="pink";
    }
    //鼠标移出时回复div颜色
    function recoverColorwhenMouseout(div){
        div.style.backgroundColor="";
    }

    //当鼠标带点击div时，将div的值赋给输入文本框
    function Write(div){
        //将div中的值赋给文本框
        document.getElementById("keyword").value=div.innerHTML;
        //让下拉提示框消失
        div.parentNode.style.display="none";
    }

    function test2(){
        //输入回车，获取输入框内容焦点
        $("#sel").keypress(function(){
            $("#keyword").focus();
            $("#sel").css("display","none");
        });
        //双击，获取输入框内容焦点
        $("#sel").dblclick(function(){
            $("#keyword").focus();
            $("#sel").css("display","none");
        });
        //将选中的下拉列表中的内容添加到输入框中
        $("#keyword").val($("option:selected").html());
    }
</script>
<body>
<!--breadcrumbs area start-->
<div class="breadcrumbs_area breadcrumbs_bg" style="padding: 10px 0px">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb_content">
                    <ul>
                        <li><a th:href="@{/}">回到首页</a></li>
                        <li>所有博客</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!--breadcrumbs area end-->

<!--blog area start-->
<div class="blog_page_section blog_reverse">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-12">
                <div class="blog_sidebar_widget">
                    <div class="widget_list widget_search">
                        <div class="widget_title">
                            <h3>Search</h3>
                        </div>
                        <form th:action="@{/goods/keyContent}">
                            <input type="text" placeholder="关键内容搜索" id="keyContent" name="keyContent" style="width:300px;margin-bottom: 0px" >
                            <button type="submit">搜索</button>
                        </form>

                    </div>

                    <div class="widget_list widget_post" >
                        <div class="widget_title">
                            <h3>Recent Posts</h3>
                        </div>
                        <div class="post_wrapper" th:each="blog:${recentGoods}">
                            <div class="post_thumb">
                                <a th:href="@{/goods/good/}+${blog.getId()}"><img th:src="${blog.getPic()}" alt=""></a>
                            </div>
                            <div class="post_info">
                                <h4><a th:href="@{/goods/good/}+${blog.getId()}">[[${blog.getProductName()}]]</a></h4>
                                <span>[[${blog.getDate()}]]</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-9 col-md-12">
                <div class="blog_wrapper" th:each="blog:${keyGoods}">
                    <div class="single_blog">
                        <div class="blog_thumb">
                            <a href="blog-details.html"><img th:src="${blog.getPic()}" alt=""></a>
                        </div>
                        <div class="blog_content">
                            <div class="post_date">
                                <span>Posted by: <a href="#">[[${nameMap.get(blog.getDelegateId())}]]</a> / On : <a href="#">[[${blog.getDate()}]]</a></span>
                            </div>
                            <h4 class="post_title"><a href="#">[[${blog.getProductName()}]]</a></h4>
                            <p style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;
                               -webkit-line-clamp: 2; -webkit-box-orient: vertical;">[[${blog.getDescription()}]]</p>
                            <footer class="blog_footer">
                                <a th:href="@{/goods/good/}+${blog.getId()}">+ 了解更多</a>
                            </footer>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>
<!--blog area end-->
<!-- JS
============================================ -->
<!--jquery min js-->
<script th:src="@{/assets/js/vendor/jquery-3.5.0.min.js}"></script>
<!--popper min js-->
<script th:src="@{/assets/js/popper.js}"></script>
<!--bootstrap min js-->
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<!--owl carousel min js-->
<script th:src="@{/assets/js/owl.carousel.min.js}"></script>
<!--slick min js-->
<script th:src="@{/assets/js/slick.min.js}"></script>
<!--magnific popup min js-->
<script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
<!--jquery countdown min js-->
<script th:src="@{/assets/js/jquery.countdown.js}"></script>
<!--jquery ui min js-->
<script th:src="@{/assets/js/jquery.ui.js}"></script>
<!--jquery elevatezoom min js-->
<script th:src="@{/assets/js/jquery.elevatezoom.js}"></script>
<!--isotope packaged min js-->
<script th:src="@{/assets/js/isotope.pkgd.min.js}"></script>
<!-- Plugins JS -->
<script th:src="@{/assets/js/plugins.js}"></script>

<!-- Main JS -->
<script th:src="@{/assets/js/main.js}"></script>

</body>
</html>